<template>
	<div class="product-detail-rd">
		<div class="pj-header">
			<div class="func">
				<router-link :to="{path:'/index'}" class="func-item flex-1 gohome"></router-link>
			</div>
			<banner :swiperImg="swiperImg" :swiperHeight="swiperHeight"></banner>
		</div>
		<div class="project-container">
			<div class="d-project-header clearfix">
				<!-- <div class="initiator">
					<img class="initiator-avatar" :src="pjd.avatar" alt="">
					<span class="initiator-name">{{pjd.user_name}}</span>
				</div>
				<div class="pj-status appointment">{{pjd.pjstatus}}</div> -->
				<div class="initiator">
					<div class="d-label-default">{{pjd.province}}-{{pjd.city}}</div>
					<div class="d-label-default">{{pjd.deal_type}}</div>
				</div>
				<div class="pj-status appointment">{{pjd.pjstatus}} 剩余:{{pjd.remain_days}}</div>
			</div>
			<div class="d-project-content">
				<div class="d-project-content-title">
					{{pjd.name}}
				</div>
				<div class="d-project-content-intro">
					{{pjd.brief}}
				</div>
				<div class="progress">
					<div class="progress-text">已预约：{{pjd.percent}}%</div>
					<div class="weui-progress">
						<div class="weui-progress__bar">
							<div class="weui-progress__inner-bar" :style="{width: pjd.percent > 100 ? '100%' : pjd.percent + '%'}"></div>
						</div>
					</div>
				</div>
				<div class="pj-n box-row">
					<div class="flex-1">
						<b class="content">{{pjd.limit_price || 0}}</b>目标
					</div>
					<div class="flex-1" v-if="pjd.type == 1">
						<b class="content">{{pjd.total_virtual_price || 0}}</b>已认购
					</div>
					<div class="flex-1" v-else>
						<b class="content">{{pjd.total_virtual_price_format || 0}}</b>已认购
					</div>
					<div class="flex-1" v-if="pjd.type == 1">
						<b class="content">{{pjd.invote_mini_money || 0}}</b>起投金额
					</div>
					<div class="flex-1" v-else>
						<b class="content">{{pjd.gen_num || 0}}</b>认购人数
					</div>
				</div>
			</div>
		</div>
		<div class="no-login" v-if="!isLogin">
			<router-link :to="{path:'/login',query:{redirect: '/productDetail?id='+pjd.id}}">登录</router-link>后可查看该项目更多详情
		</div>
		<div class="project-introduce-new mb20">
			<router-link :to="{path:'/protoitem',query:{id:pjd.id,view:'detail'}}" class="p-i-cell bottom-1px">
				<div class="p-i-left">
					项目介绍
				</div>
				<div class="p-i-right p-i-arrow">
					<span class="h-arrow fr"></span>
				</div>
			</router-link>
			<router-link :to="{path:'/protoitem',query:{id:pjd.id,view:'sel'}}" class="p-i-cell bottom-1px">
				<div class="p-i-left">
					投资方案
				</div>
				<div class="p-i-right p-i-arrow">
					<span class="h-arrow fr"></span>
				</div>
			</router-link>
			<router-link :to="{path:'/protoitem',query:{id:pjd.id,view:'ppgs'}}" class="p-i-cell bottom-1px">
				<div class="p-i-left">
					品牌故事
				</div>
				<div class="p-i-right p-i-arrow">
					<span class="h-arrow fr"></span>
				</div>
			</router-link>
			<router-link :to="{path:'/protoitem',query:{id:pjd.id,view:'team'}}" class="p-i-cell bottom-1px">
				<div class="p-i-left">
					发起团队
				</div>
				<div class="p-i-right">
					<div class="team">
						<img class="team-img" :src="pjd.avatar" alt="">
						<div class="team-name mr5">{{pjd.user_name}}</div>
					</div>
				</div>
			</router-link>
			<router-link :to="{path:'/map',query:{id:pjd.id,view:'map',slng:pjd.lng,slat:pjd.lat,mlng:mlng,mlat:mlat,address:pjd.address}}" class="p-i-cell bottom-1px">
				<div class="p-i-left">
					地理位置
				</div>
				<div class="p-i-right">
					<div class="team">
						<i class="pos-img icon-address"></i>
						<div class="pos-name mr5">
							<p class="pos-n1">{{pjd.city}}</p>
							<p class="pos-n2">{{pjd.address}}</p>
						</div>
					</div>
				</div>
			</router-link>
			<router-link :to="{path:'/protoitem',query:{id:pjd.id,view:'xxpl'}}" class="p-i-cell bottom-1px">
				<div class="p-i-left">
					信息披露
				</div>
				<div class="p-i-right p-i-arrow">
					<span class="h-arrow fr"></span>
				</div>
			</router-link>
			<router-link :to="'/riskwarn'" class="p-i-cell">
				<div class="p-i-left">
					风险提示
				</div>
				<div class="p-i-right p-i-arrow">
					<span class="h-arrow fr"></span>
				</div>
			</router-link>
		</div>
		<!-- <div class="project-introduce">
			<div class="ptab" style="height: 44px;">
				<sticky
			        ref="sticky"
			        :check-sticky-support="false"
			        :disabled="disabled">
					<tab :line-width="2" active-color="#02d560" custom-bar-width="65px">
					  <tab-item selected @on-item-click="tabHandle('intro')">项目介绍</tab-item>
					  <tab-item @on-item-click="tabHandle('tz')" v-if="pjd.type == 1">投资方案</tab-item>
					  <tab-item @on-item-click="tabHandle('pl')" v-if="pjd.type == 1">信息披露</tab-item>
					  <tab-item @on-item-click="tabHandle('hb')" v-if="pjd.type == 0">回报方案</tab-item>
					</tab>
				</sticky>
			</div>
			<div class="tab-container">
				<div class="tab-container-item" v-show="tabIndex == 'intro'"><div v-html="pjd.description"></div></div>
				<div class="tab-container-item" v-show="tabIndex == 'tz'"><div v-html="pjd.description_5"></div></div>
				<div class="tab-container-item" v-show="tabIndex == 'hb'"><div v-html="pjd.description_5"></div></div>
				<div class="tab-container-item" v-show="tabIndex == 'pl'">
					<div class="pub">
						<div class="d-p-action box-row">
							<div class="flex-1">
								<a href="javascript:;" class="action-btn active" @click="pbHandle('pub')">公开资料</a>
							</div>
							<div class="flex-1">
								<a href="javascript:;" class="action-btn" @click="pbHandle('tz')">投资人可见</a>
							</div>
						</div>
						<div class="pub-container">
							<div class="pub-container-list">
								<i class="circle"></i>
								<div class="pub-container-title"><i class="icon icon-calender"></i>2019-01-14</div>
								<div class="pub-container-content">
									<div class="pub-container-content-title">
										{{pjd.name}}
									</div>
									<a :href="item.file" class="pdf-url" v-for="item in pjd.attach">{{item.title}}</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			
			</div>
		</div> -->
		
<!-- 		<div class="pj-footer box-row">
			<a href="javascript:;" class="footer-item flex-1 gogroup" @click="showGroup = true">
				<i class="icon"></i>
				<p>进群</p>
			</a>
 			<div class="after-appoint">
				<a href="javascript:;" class="after-appoint-btn h-arrow">候补预约</a>
				<div class="a-line"></div>
				<div class="a-circle"></div>

			
			<a href="javascript:;" class="footer-item-w" @click="checkProject">认购</a>
		</div> -->

		<div class="fixed-func" :class="ffn?'fixed-func-normal':''" >
			<a href="javascript:;" class="ff-l" @click="showGroup = true"><i class="icon"></i><span style="font-size:16px;padding-left:5px;">进群交流</span></a>
			<a href="javascript:;" class="ff-r" @click="linkus"><i class="icon"></i><span style="font-size:16px;padding-left:5px;">在线客服</span></a>
		</div>

		<div class="group-dialog-box">
			<x-dialog v-model="showGroup" class="dialog-wrap">
		        <div class="dialog-content">
		        	<p class="title">
		        		长按识别二维码，添加客服微信
		        	</p>
		        	<!-- <qrcode value="http://fc.wzgaolaozhuang.com/group_qrcode.jpg" type="img" :size=130></qrcode> -->
		        	<img :src="groupQrcode" alt="" style="width:130px;height:130px;">
		        	<p class="remark">
		        		请备注"{{pjd.name}}"添加微信客服，进群与项目方直接交流；已有客服请勿重复添加
		        	</p>
		        </div>
		        <a href="javascript:;" class="icon icon-close" @click="showGroup = false"></a>
		      </x-dialog>
		</div>
		<!-- <a href="javascript:;" class="gokf" @click="linkus"><i class="icon icon-kf"></i><p>客服</p></a> -->
		<!-- <div class="p-item-view">
			<div class="p-item-detail" v-show="pitab == 'detail'">
				<div v-html="pjd.description"></div>
			</div>
			<div class="p-item-ppgs" v-show="pitab == 'ppgs'"></div>
			<div class="p-item-team" v-show="pitab == 'team'"></div>
			<div class="p-item-xxpl" v-show="pitab == 'xxpl'">
				<div class="pub">
						<div class="d-p-action box-row">
							<div class="flex-1">
								<a href="javascript:;" class="action-btn active" @click="pbHandle('pub')">公开资料</a>
							</div>
							<div class="flex-1">
								<a href="javascript:;" class="action-btn" @click="pbHandle('tz')">投资人可见</a>
							</div>
						</div>
						<div class="pub-container">
							<div class="pub-container-list">
								<i class="circle"></i>
								<div class="pub-container-title"><i class="icon icon-calender"></i>2019-01-14</div>
								<div class="pub-container-content">
									<div class="pub-container-content-title">
										{{pjd.name}}
									</div>
									<a :href="item.file" class="pdf-url" v-for="item in pjd.attach">{{item.title}}</a>
								</div>
							</div>
						</div>
					</div>
			</div>
		</div> -->
	</div>
</template>


<script>
	import {Sticky,XDialog,Qrcode} from 'vux';
	import banner from '__cp/banner';
	import {getPJDetail} from '__api';
	import store from '@/store/index';
	import previewImg from '__assets/images/preview.jpg';
	import defaultAvatar from '__assets/images/default-avatar.png'
	import groupQrcode from '__assets/images/group_qrcode.jpg'
	import wxapi from '@/api/wxapi.js'

	export default{
		name:"product-detail",
		components:{banner,Sticky,XDialog,Qrcode},
		data(){
			return{
				groupQrcode: groupQrcode,
				tabIndex: 'intro',
				isLogin: store.state.user.loginStatus,
				pbIndex: 0,
				swiperImg:[],
				pjd:{},
				lodingShow:true,
				showGroup: false,
				pitab:'',
				ffn:false,
				mlng:'',
				mlat:'',
				disabled: typeof navigator !== 'undefined' && /iphone/i.test(navigator.userAgent) && /ucbrowser/i.test(navigator.userAgent)
			}
		},
		watch:{
			navActive:function(){
				this.goTop();
			},
		},
		computed:{
			swiperHeight:function(){
				return '6.666rem'
			}
		},
		created(){
			this.$nextTick(function(){
				this.getProductData();
				this.jcBottom();
			})
		},
		mounted(){
			wxapi.wxRegister(this.wxRegCallback);
		},
		methods:{
			tabHandle(param){
				if((param == 'tz' || param == 'pl' || param == 'hb') && this.isLogin === false){
					this.$router.push({path:'/login',query:{redirect:'/productDetail?id='+this.$route.query.id}})
				}
				this.tabIndex = param;
			},
			linkus(){
				_MEIQIA('withoutBtn');
    			_MEIQIA('init');
			    _MEIQIA('allSet', function(){
			      _MEIQIA('showPanel');
			    });
			},
			pbHandle(param){
				if(param == 'pub'){
					this.pbIndex = 0;
				} else {
					if(false){
						this.pbIndex = 1;
					} else {
						return;
					}
				}
			},
			goTop(){
				console.log(1)
			},
			getProductData(){
				this.$loading();
				getPJDetail({id: this.$route.query.id}).then( res => {
					let pjd = res.deal_info;
					if(pjd.deal_wap_image){
						this.swiperImg = [this.BASE_URL + pjd.deal_wap_image]
					} else if(pjd.image){
						this.swiperImg = [this.BASE_URL + pjd.image]
					} else {
						this.swiperImg = [previewImg]
					}

					let pjstatus = '开放认购中';

					// type :  0 消费众筹  1 股权或不动产
					if(pjd.tpye == 0){
						if(pjd.status == 0){
							pjstatus = '预热中'
						} else {
							if(pjd.percent >= 100){
								pjstatus = '已成功'
								pjd.remain_days = '已成功'
							} else {
								if(pjd.status == 1){
									pjstatus = '已成功'
									pjd.remain_days = '已成功'
								}

								if(pjd.status == 2){
									pjstatus = '失败'
									pjd.remain_days = '失败'
								}

								if(pjd.status == 3){
									pjstatus = '开放认购中'
								}

								if(pjd.status == 4){
									pjstatus = '长期项目'
									pjd.remain_days = '长期项目'
								}
							}
						}
					} else {
						pjstatus = this.statusHandle(pjd.begin_time,pjd.nowtime,pjd.end_time,pjd.type,pjd.is_success)
					}

					this.mlng = pjd.marker ? pjd.marker.split(',')[0] : '';
					this.mlat = pjd.marker ? pjd.marker.split(',')[1] : '';

					pjd.avatar = pjd.avatar ? this.BASE_URL + pjd.avatar : defaultAvatar;
					pjd.pjstatus = pjstatus;

					this.pjd = pjd;
					//this.$refs.sticky.bindSticky();
					this.$loading.end();
				})
			},
			checkProject(){
				if(store.state.user.user.investor_status != 1){
					this.$router.push({path: '/userauth',query:{redirect: '/productDetail?id='+this.$route.query.id}})
				} else {
					//this.$vux.toast.text('请联系客服','middle')
					this.showGroup = true
				}
				
			},
			statusHandle(bt,nt,et,type,is_success){
				nt = nt ? nt : Date.parse(new Date())/1000;
				let r = '开放认购中';
				if(bt>nt){
					r = '预热中';
				}
				else if(et<nt && et != 0){
					if(is_success == 1){
						r = '已成功'
					} else {
						r = '失败'
					}
				} else {
					if( type == 1){
						r = '开放认购中'
					}
				}
				return r;
			},
			jcBottom(){
				let _this = this;
				window.onscroll = function(){
				    //变量scrollTop是滚动条滚动时，距离顶部的距离
				    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
				    //变量windowHeight是可视区的高度
				    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
				    //变量scrollHeight是滚动条的总高度
				    var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
		           //滚动条到底部的条件
		           	if(scrollTop+windowHeight>=scrollHeight-20){
						_this.ffn = true;
		          	} else {
						_this.ffn = false;
		      		}
				}
			},
			wxRegCallback () {
			  // 用于微信JS-SDK回调
			  this.wxShareTimeline()
			  this.wxShareAppMessage()
			},
			wxShareTimeline () {
			  // 微信自定义分享到朋友圈
			  let option = {
			    title: '乐趣投', // 分享标题, 请自行替换
			    link: window.location.href, // 分享链接，根据自身项目决定是否需要split
			    imgUrl: 'http://www.lqtou.com/share/logo.png', // 分享图标, 请自行替换，需要绝对路径
			    success: () => {
			      alert('分享成功')
			    },
			    error: () => {
			      alert('已取消分享')
			    }
			  }
			  // 将配置注入通用方法
			  wxapi.ShareTimeline(option)
			},
			wxShareAppMessage () {
			  // 微信自定义分享给朋友
			  let option = {
			    title: '乐趣投', // 分享标题, 请自行替换
			    desc: '乐趣财经项目投融资信息', // 分享描述, 请自行替换
			    link: window.location.href, // 分享链接，根据自身项目决定是否需要split
			    imgUrl: 'http://www.lqtou.com/share/logo.png', // 分享图标, 请自行替换，需要绝对路径
			    success: () => {
			      alert('分享成功')
			    },
			    error: () => {
			      alert('已取消分享')
			    }
			  }
			  // 将配置注入通用方法
			  wxapi.ShareAppMessage(option)
			}
		}
	};

</script>
<style>	
.group-dialog-box .weui-dialog{
	overflow: visible;
}
.product-detail-rd .tab-container img{
	max-width:100%;
}
</style>
<style scoped lang="scss">
	.fixed-func{
	position: fixed;
	left:a(110px);
	right:a(110px);
	bottom: a(40px);
	    padding: a(30px) 0;
    background: #fff;
	    border-radius: a(100px);
	z-index: 997;
	    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    animation: myThired .2s;
    -moz-animation: myThired .2s;
    -webkit-animation: myThired .2s;
    -o-animation: myThired .2s;
}
.fixed-func-normal{
	position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    border-radius: 0 !important;
    -webkit-box-shadow: 0 !important;
    box-shadow: none !important;
    animation: myfirst .2s;
    -moz-animation: myfirst .2s;
    -webkit-animation: myfirst .2s;
    -o-animation: myfirst .2s;
}
.ff-l{
	    padding-left: 15px;
    padding-right: 15px;
        height: a(34px);
    line-height: a(34px);
    position: relative;
        float: left;
    box-sizing: border-box;
    position:relative;

    .icon{
        width: 19px;
	    height: 16px;
	    background: url('~__assets/images/icon/group.png') no-repeat;
		background-size: 100% 100%;
	    float: left;
	}
}
.ff-l:after{
	content: "";
    position: absolute;
    right: 0;
    top: 0;
    margin-right: -a(240px);
    width: 3px;
    height: a(34px);
    background: #e5e5e5;
    border-radius: 2px;
}
.ff-r{
	    padding-left: 15px;
    padding-right: 15px;
        height: a(34px);
    line-height: a(34px);
    position: relative;
        float: left;
    box-sizing: border-box;
    .icon{
        width: 19px;
	    height: 16px;
	    background: url('~__assets/images/icon/kf.png') no-repeat;
		background-size: 100% 100%;
	    float: left;
	}
}
.p-item-view{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	height:100%;
	width:100%;
	background:#ffffff;
	z-index:999;
	
	.p-item-detail{
		background-color: #ffffff;
		padding: a(30px);
		overflow: hidden;
		word-break: break-all;
		img{max-width: 100%;}
	}

}
.project-introduce-new{background:#fff;}
.p-i-cell{
	display: block;
	margin-left: a(38px);
    padding: 0 a(38px) 0 0 !important;
	height: 70px;
    .p-i-left{
		float:left;
		width:25%;
		color: #33353f;
		font-size:16px;
		line-height:70px;
	}
	.p-i-arrow{line-height:70px}
	.p-i-right{
		float:right;
		width:75%;
		.team{overflow:hidden;padding-top:20px;}
		.team-name{float:right;font-size:16px;line-height: 30px;}
		.team-img{float:right;width:30px;height:30px;-o-object-fit: cover;
    object-fit: cover;border-radius:50%;vertical-align: bottom;}

    	.pos-name{
			float:right;

			.pos-n1{
				font-size: 16px;
				color:#636675;
				text-align:right;
			}
			.pos-n2{
				font-size: 12px;
				color:#9698a2;
			}
    	}
	}
	.h-arrow:after{
	    border-top: 1px solid #33353f;
	    border-right: 1px solid #33353f;
	}
}
	.no-login{
		padding: 20px 0 30px;
		text-align:center;
		font-size:15px;font-weight:600;
		a{color:#02D560;font-size:15px;font-weight:600;margin-right:5px;}
	}
	.dialog-wrap{
		position: relative;
		.icon-close{
			position: absolute;
			bottom: -56px;
			@include bg("~__assets/images/icon/close-1.png",30px,30px);
			left: 50%;
			margin-left: -15px;
		}
	}
	.dialog-content{
		text-align: center;
		.title{
			padding: 30px 0;
			font-size: 18px;
			font-weight: 400;
		}
		.remark{
			padding: 30px;
			line-height: 1.5;
			font-size: 12px;
			color: #666666;
		}
	}
	.vux-sticky-box{z-index:500}.vux-sticky{width:100%;position:-webkit-sticky;position:sticky;top:0}.vux-fixed{width:100%;position:fixed;top:0;-webkit-transform:translateZ(0);transform:translateZ(0)}
	.product-detail-rd{
		padding-bottom: 55px;
	}
	.pj-header{
		position: relative;
		.func{
			position: absolute;
			top: 6px;
			left: a(30px);
			right: a(30px);
			z-index: 9;

			.gohome{
				float: left;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background: rgba(0,0,0,.3);
				position: relative;

				&:after{
					content: '';
				    display: inline-block;
				    width: 10px;
				    height: 10px;
				    margin-left: 11px;
				    margin-top: 9px;
				    border-top: 2px solid #fff;
				    border-right: 2px solid #fff;
				    transform: rotate(225deg);
				}
			}
		}
	}
	.pj-footer{
		height: 55px;
		text-align:center;
		position: fixed;
	    bottom: 0;
	    width: 100%;
	    z-index: 997;
	    background-color: #ffffff;
		box-shadow: 0 -2px 10px 0 rgba(154,141,141,0.6);
	}
	.after-appoint{
		position: absolute;
		right: 10px;
		bottom: 65px;
		width: 130px;
		.after-appoint-btn{
			display: block;
			width: 130px;
			@include lh(35px);
			font-size: 14px;
			color: #ffffff;
			text-align:center;
		    background: #292c46;
		    border-radius: 5px;
			box-shadow: 0 5px 10px 0 hsla(0,0%,40%,.3);
		}
		.a-line{
			width: 2px;
		    height: 20px;
		    display: block;
		    background-color: #292c46;
		    position: absolute;
		    right: 20px;
		}
		.a-circle{
			display: block;
		    width: 8px;
		    height: 8px;
		    border-radius: 50%;
		    background-color: #292c46;
		    position: absolute;
		    right: 17px;
		    top: 54px;
		}
	}
	.footer-item{
		padding-top: 7px;
		height: 55px;
		line-height: 27px;
		color: #666;
		font-size: 12px;
		p{font-size:12px;margin-top: -2px;}
	}
	.footer-item-w{
		@include lh(55px);
		width: a(568px);
		font-size: 18px;
		color: #ffffff;
		background-color: #0f2dcd;
		background: linear-gradient(left top,rgb(0,255,0),rgb(2,213,96));
  		background-image: -webkit-linear-gradient( 0deg, rgb(0,255,0) 0%, rgb(2,213,96) 100%);
	}
	.gogroup{
		i{
			@include bg("~__assets/images/icon/iconfont-group.png",17px,16px);
		}
	}
	.icon-calender{
		position: absolute;
		left: a(-44px);
		@include bg("~__assets/images/icon/iconfont-calender.png");
		width: a(28px);
		height: a(28px);
	}
	.project-container{
		background-color: #ffffff;
		padding: 0 a(30px);
		margin-bottom: a(20px);
	}
	.d-project-header{
		padding: a(30px) 0;
	}
	.initiator{
		float: left;
		@include lh(a(50px));
		.initiator-avatar{
			display: inline-block;
			width: a(50px);
			height: a(50px);
			border-radius: 50%;
		}
		.initiator-name{
			font-size: 12px;
			display: inline-block;
			margin-left: a(20px);
		}
	}
	.pj-status{
		float: right;
		@include lh(a(50px));
		&.appointment{
			color: #ffb600;
			font-weight:bolder;
		}
		&.subscription{
			color: #0f2dcd;
		}
	}
	.d-project-content-title{
		font-size: 22px;
		font-weight: 700;
    	color: #33353f;
	}
	.d-label-default{
	    float: left;
	    margin-right: 10px;
	    padding: 0 a(10px);
	    border-radius: 2px;
	    color: #636675;
	    background: #f2f4f6;
	}
	@media screen and (max-width:413px) and (min-width:359px) {
	  .d-project-content .d-project-content-type .sort-item {
	    padding-right: 18% !important
	  }

	  .d-project-content .d-project-content-type .sort-item:last-child {
	    padding-right: 0 !important
	  }
	}

	@media screen and (min-width:413px) {
	  .d-project-content .d-project-content-type .sort-item {
	    padding-right: 20% !important
	  }

	  .d-project-content .d-project-content-type .sort-item:last-child {
	    padding-right: 0 !important
	  }
	}
	.sort-item{
		font-size: 12px;
		.icon{margin-right: 2px;vertical-align: -1px;}
	}
	.d-project-content-type{
		padding-top: a(26px);
		color: #666;
	}
	.icon-build{
		width: 12px;
		height: 12px;
		@include bg("~__assets/images/icon/iconfont-build.png");
	}
	.icon-address{
		width: 12px;
		height: 12px;
		@include bg("~__assets/images/icon/iconfont-address.png");
	}
	.icon-address.pos-img{
		float:right;
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-top: 4px;
    	margin-left: 5px;
    	margin-right: 5px;
	}
	.d-project-content-intro{
		padding-top: a(10px);
		font-size: 14px;
		color: #9698a2;
	}
	.progress{
		margin-top: a(30px);
		overflow:hidden;
		position:relative;
		.progress-text{
			position:absolute;
			width:100%;
			height:15px;
			line-height:15px;
			text-align:center;
			color:rgb(51,51,51);
			font-size:12px;
		}
		.time{
		    float: left;
		    color: #333333;
		    height: a(88px);
		    line-height: a(80px);
		    text-align: center;
		}
		.percent{
			float: right;
		    color: #02d560;
		    height: a(88px);
		    line-height: a(80px);
		    text-align: center;
		}

		.weui-progress{
			display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    -webkit-box-align: center;
		    -webkit-align-items: center;
		    align-items: center;

		    .weui-progress__bar {
			    border-radius: a(3px);
			    height: 15px!important;
			    background-color: #ebebeb;
			    -webkit-box-flex: 1;
			    -webkit-flex: 1;
			    flex: 1;
			    border-radius: 15px;
			}
			.weui-progress__inner-bar {
			    border-radius: a(3px);
			    width: 0;
			    height: 100%;
			    //background: linear-gradient(left top,#00FF00,#02D560);
			    //background: -webkit-linear-gradient(left top,#00FF00,#02D560);
			    //background: -moz-linear-gradient(left top,#00FF00,#02D560);
				border-radius: 15px;
			    background:#ffb600;
			}
		}
	}
	.pj-n{
		padding: a(50px) 0;
		text-align:center;
		font-size: 12px;
		color: rgb(102,102,102); 
		.content{
			color: #000000;
			display: block;
			font-size: 15px;
			padding-bottom: a(12px);
		}
	}
	.tab-container{
		background-color: #ffffff;
		.tab-container-item{
			padding: a(30px);
			min-height: a(1000px);
			overflow: hidden;
    		word-break: break-all;

    		img{max-width: 100%;}
		}
	}
	.d-p-action{
		padding: a(30px) 0;
		text-align:center;
	}
	.action-btn{
		display: inline-block;
		width: 100px;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
		color: #0f2dcd;
	    border: 1px solid #0f2dcd;
	    background: #fff;
	    border-radius: 5px;

	    &.active{background: -webkit-linear-gradient(left top,#3bb5f5,#0f2dcd);color:#fff;border:none;}
	}
	.pub .pub-container {
	    margin-left: a(32px);
	    padding-left: a(32px);
	    padding-right: a(60px);
	    border-left: 2px solid #e5e5e5;
	    box-sizing: border-box;

	    .pub-container-list{
	    	position: relative;
	    }
	    .pub-container-title{
	    	font-size: 12px;
	    	color: #666;
		    padding-bottom: a(30px);
		    position: relative;
	    }
	    .pub-container-content{
	    	padding: a(30px);
		    padding-bottom: a(40px);
		    background: #fff;
		    box-shadow: 0 0 30px 0 rgba(15,45,205,.1);
		    border-radius: a(8px);
	    }
	    .pub-container-content-title{
	    	font-size: 15px;
	    	padding-bottom: a(30px);
	    	color: #000;
	    }
	    .pdf-url{font-size: 14px;line-height: 1.5;display: block
	    }
	    .circle{
	    	position: absolute;
		    background: #0f2dcd;
		    width: a(12px);
		    height: a(12px);
		    display: block;
		    border-radius: 50%;
		    top: 50%;
		    left: a(-40px);
		    margin-top:a(-6px);
	    }
	}
	.gokf{
		position: fixed;
		right: a(30px);
		bottom: 15%;
		padding-top: 13px;
		text-align: center;
		@include bg("~__assets/images/icon/kf-bg.png",55px,55px);
		i{@include bg("~__assets/images/icon/iconfont-kf-2.png",20px,16px);}
		p{color: #02d560;font-size:9px;}
	}
	@keyframes myfirst{0%{position:fixed;left:a(110px);right:a(110px);bottom:a(40px);border-radius:a(100px);-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.1);box-shadow:0 0 10px 0 rgba(0,0,0,.1)}to{position:fixed;left:0;right:0;bottom:0;border-radius:none;-webkit-box-shadow:none;box-shadow:none}}@-webkit-keyframes myfirst{0%{position:fixed;left:a(110px);right:a(110px);bottom:a(40px);border-radius:a(100px);-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.1);box-shadow:0 0 10px 0 rgba(0,0,0,.1)}to{position:fixed;left:0;right:0;bottom:0;border-radius:none;-webkit-box-shadow:none;box-shadow:none}}
	@keyframes myThired{0%{position:fixed;left:0;right:0;bottom:0;border-radius:none;-webkit-box-shadow:none;box-shadow:none}to{position:fixed;left:a(110px);right:a(110px);bottom:a(40px);border-radius:a(100px);-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.1);box-shadow:0 0 10px 0 rgba(0,0,0,.1)}}@-webkit-keyframes myThired{0%{position:fixed;left:0;right:0;bottom:0;border-radius:none;-webkit-box-shadow:none;box-shadow:none}to{position:fixed;left:a(110px);right:a(110px);bottom:a(40px);border-radius:a(100px);-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.1);box-shadow:0 0 10px 0 rgba(0,0,0,.1)}}
</style>